<form>
    <div class="row form-group">
        <div class="col-md-8">
            <div class="row form-group">
                <div class="col-md-6">
                    <label>LP <span style="color: red;">*</span></label>
                    <input type="text" class="form-control" ng-pattern="/^[T,H,I,C,S]{0,1}LP-[0-9]*$/" required
                           ng-model="newAdjustment.lpId" ng-mouseleave="getInventory()" ng-change="getInventory()"
                           placeholder="Enter LP ID (LP-1)" />
                </div>
            </div>

            <div class="row form-group" style="height: 400px; overflow: auto;">
                <div ng-show="isSearching" class="text-center">
                    <img src="assets/img/loading-spinner-grey.gif"><span>&nbsp;LOADING...</span>
                </div>
                <table ng-show="!isSearching" class="table table-striped table-bordered">
                    <tr>
                        <td ng-show="tabActiveId != 'MoveLocation'" style="width: 20px;"></td>
                        <td>Location</td>
                        <td>Customer</td>
                        <td>Title</td>
                        <td>Item</td>
                        <td>UOM</td>
                        <td>Diverse</td>
                        <td>Lot No</td>
                        <td>Expiration Date</td>
                        <td>Status</td>
                        <td>SN</td>
                        <td>QTY</td>
                    </tr>
                    <tr ng-repeat="view in newAdjustment.inventorys" ng-click="checkToSel(view)"
                        ng-class="{'tableTrSelStyle':isChecked(view.id) && tabActiveId != 'MoveLocation'}">
                        <td ng-show="tabActiveId != 'MoveLocation'">
                            <input name="selInventory" type="radio" ng-checked="isChecked(view.id)" />
                        </td>
                        <td>{{view.locationName}}</td>
                        <td>{{view.customerName}}</td>
                        <td>{{view.titleName}}</td>
                        <td>{{view.itemName}}</td>
                        <td>{{view.unitName}}</td>
                        <td>{{view.diverseName}}</td>
                        <td>{{view.lotNo}}</td>
                        <td>{{view.expirationDate}}</td>
                        <td>{{view.status}}</td>
                        <td>{{view.sn}}</td>
                        <td>{{view.qty}}</td>
                    </tr>
                    <tr ng-show="newAdjustment.inventorys.length > 1 || newAdjustment.adjustmentContent.childrenLps">
                        <td ng-show="tabActiveId != 'MoveLocation'" colspan="8">
                            <span ng-show="newAdjustment.adjustmentContent.childrenLps">LP inside:</span>
                            {{newAdjustment.adjustmentContent.childrenLps}}
                        </td>
                        <td ng-show="tabActiveId == 'MoveLocation'" colspan="7">
                            <span ng-show="newAdjustment.adjustmentContent.childrenLps">LP inside:</span>
                            {{newAdjustment.adjustmentContent.childrenLps}}
                        </td>
                        <td>QTY:</td>
                        <td>{{newAdjustment.adjustmentContent.Total}}</td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="col-md-4">
            <div class="row form-group" style="border: 1px solid #ddd; border-right:none;">
                <div class="col-md-8" style="padding-top: 10px;">
                    <div role="tabpanel" class="tab-pane tabPanel active" ng-if="tabActiveId == 'AdjustStatus'">
                        <form>
                            <div class="row form-group" ng-if="newAdjustment.hasSN">
                                <div class="col-md-10">
                                    <label>SN <span style="color: red;">*</span></label>
                                    <div class="adjustmentBottomBorder">{{newAdjustment.sn}}</div>
                                </div>
                            </div>
                            <div class="row form-group" ng-if="!newAdjustment.hasSN">
                                <div class="col-md-10">
                                    <label>QTY <span style="color: red;">*</span></label>
                                    <input type="text" class="form-control" ng-pattern="/^[0-9]*$/" required ng-model="newAdjustment.qty" placeholder="Enter Number" />
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust From Status <span style="color: red;">*</span></label>

                                    <div class="adjustmentBottomBorder">{{newAdjustment.adjustFrom}}</div>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust To Status <span style="color: red;">*</span></label>
                                    <ui-select ng-model="newAdjustment.adjustTo" required>
                                        <ui-select-match>
                                            <span ng-bind="$select.selected"></span>
                                        </ui-select-match>
                                        <ui-select-choices repeat="item in qualitys | filter: $select.search">
                                            <b>{{item}}</b>
                                        </ui-select-choices>
                                    </ui-select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div role="tabpanel" class="tab-pane tabPanel active" ng-if="tabActiveId == 'AdjustQTY'">
                        <form>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust From QTY</label>
                                    <div class="adjustmentBottomBorder">{{newAdjustment.adjustFrom}}</div>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust To QTY <span style="color: red;">*</span></label>
                                    <input type="text" class="form-control" ng-pattern="/^[0-9]*$/" required ng-model="newAdjustment.adjustTo" placeholder="Enter Number" />
                                </div>
                            </div>
                        </form>
                    </div>
                    <div role="tabpanel" class="tab-pane tabPanel active" ng-if="tabActiveId == 'LPAdjustTitle'">
                        <form>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust From Title</label>
                                    <div class="adjustmentBottomBorder">{{newAdjustment.adjustmentContent.Title}}</div>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust To Title <span style="color: red;">*</span></label>
                                    <organization-auto-complete name="title" tag="Title" ng-model="newAdjustment.adjustTo"
                                                                required ></organization-auto-complete>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div role="tabpanel" class="tab-pane tabPanel active" ng-if="tabActiveId == 'adjustSN'">
                        <form>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust From SN</label>
                                    <div class="adjustmentBottomBorder">{{newAdjustment.sn}}</div>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust To SN<span style="color: red;">*</span></label>
                                    <input type="text" class="form-control" required
                                           ng-model="newAdjustment.adjustTo"/>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div role="tabpanel" class="tab-pane tabPanel active" ng-if="tabActiveId == 'MoveLocation'">
                        <form>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust From Location</label>
                                    <div class="adjustmentBottomBorder">{{newAdjustment.adjustmentContent.Location}}</div>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust To Location <span style="color: red;">*</span></label>
                                    <location-auto-complete ng-model="newAdjustment.adjustTo" required name="location"/>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div role="tabpanel" class="tab-pane tabPanel active" ng-if="tabActiveId == 'MoveLP'">
                        <form>
                            <div class="row form-group" ng-if="newAdjustment.hasSN">
                                <div class="col-md-10">
                                    <label>SN <span style="color: red;">*</span></label>
                                    <div class="adjustmentBottomBorder">{{newAdjustment.sn}}</div>
                                </div>
                            </div>
                            <div class="row form-group" ng-if="!newAdjustment.hasSN">
                                <div class="col-md-10">
                                    <label>QTY <span style="color: red;">*</span></label>
                                    <input type="text" class="form-control" ng-pattern="/^[0-9]*$/" required ng-model="newAdjustment.qty" placeholder="Enter Number" />
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust From LP</label>
                                    <div class="adjustmentBottomBorder">{{newAdjustment.adjustFrom}}</div>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust To LP <span style="color: red;">*</span></label>
                                    <input type="text" class="form-control" ng-pattern="/^[T,H,I,C,S]{0,1}LP-[0-9]*$/" required ng-model="newAdjustment.adjustTo" placeholder="Enter LP ID (LP-1)" />
                                </div>
                            </div>
                        </form>
                    </div>
                    <div role="tabpanel" class="tab-pane tabPanel active" ng-if="tabActiveId == 'adjustLotNo'">
                        <form>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust From Lot No.</label>
                                    <div class="adjustmentBottomBorder">{{newAdjustment.lPAdjustLotNo}}</div>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust To Lot No.<span style="color: red;">*</span></label>
                                    <input type="text" class="form-control" required
                                           ng-model="newAdjustment.adjustTo" placeholder="Enter Text" />
                                </div>
                            </div>
                        </form>
                    </div>
                    <div role="tabpanel" class="tab-pane tabPanel active" ng-if="tabActiveId == 'adjustExpDate'">
                        <form>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust From Expiration Date.</label>
                                    <div class="adjustmentBottomBorder">{{newAdjustment.lPAdjustExpDate | amDateFormat:'YYYY-MM-DD'}}</div>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust To Expiration Date.<span style="color: red;">*</span></label>
                                    <lt-date-time value="newAdjustment.adjustTo"  date-format="yyyy-mm-dd" min-view="2" />
                                </div>
                            </div>
                        </form>
                    </div>
                    <div role="tabpanel" class="tab-pane tabPanel active" ng-if="tabActiveId == 'adjustMfgDate'">
                        <form>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust From Mfg Date.</label>
                                    <div class="adjustmentBottomBorder">{{newAdjustment.lPAdjustMfgDate  | amDateFormat:'YYYY-MM-DD'}}</div>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust To Mfg Date.<span style="color: red;">*</span></label>
                                    <lt-date-time value="newAdjustment.adjustTo"  date-format="yyyy-mm-dd" min-view="2"/>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div role="tabpanel" class="tab-pane tabPanel active" ng-if="tabActiveId == 'adjustShelfLifeDays'">
                        <form>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust From Shelf Life Days.</label>
                                    <div class="adjustmentBottomBorder">{{newAdjustment.lPAdjustShelfLifeDays}}</div>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust To Shelf Life Days.<span style="color: red;">*</span></label>
                                    <input type="number" class="form-control" required
                                           ng-model="newAdjustment.adjustTo" placeholder="Enter Days" />
                                </div>
                            </div>
                        </form>
                    </div>
                    <div role="tabpanel" class="tab-pane tabPanel active" ng-if="tabActiveId == 'AdjustUOM'">
                        <form>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust From UOM</label>
                                    <div class="adjustmentBottomBorder">{{newAdjustment.adjustmentContent.Unit}}</div>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust To UOM <span style="color: red;">*</span></label>
                                    <ui-select ng-model="newAdjustment.adjustTo" required>
                                        <ui-select-match>
                                            <span ng-bind="$select.selected.name"></span>
                                        </ui-select-match>
                                        <ui-select-choices repeat="item.id as item in newAdjustment.unitList | filter: $select.search">
                                            <b>{{item.name}}</b>
                                        </ui-select-choices>
                                        <ui-select-no-choice>
                                            No available item.
                                        </ui-select-no-choice>
                                    </ui-select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div role="tabpanel" class="tab-pane tabPanel active" ng-if="tabActiveId == 'AdjustItem'">
                        <form>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust From Item</label>
                                    <div class="adjustmentBottomBorder">{{newAdjustment.adjustmentContent.Item}}</div>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust To Item <span style="color: red;">*</span></label>
                                    <itemspec-auto-complete customer-id="newAdjustment.customerId" ng-model="newAdjustment.adjustTo" name="itemSpec" required
                                                            on-select="adjustToItemChange(itemSpec)"></itemspec-auto-complete>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>Adjust To Unit <span style="color: red;">*</span></label>
                                    <ui-select ng-model="newAdjustment.adjustToUnit" required>
                                        <ui-select-match>
                                            <span ng-bind="$select.selected.name"></span>
                                        </ui-select-match>
                                        <ui-select-choices repeat="item.id as item in itemUnits | filter: $select.search">
                                            <b>{{item.name}}</b>
                                        </ui-select-choices>
                                        <ui-select-no-choice>
                                            No available item.
                                        </ui-select-no-choice>
                                    </ui-select>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-10">
                                    <label>
                                        Adjust To Diverse
                                        <span ng-if="itemDiverses.length > 0" style="color: red;">*</span>
                                    </label>
                                    <ui-select ng-model="newAdjustment.adjustToDiverse">
                                        <ui-select-match>
                                            <span ng-bind="$select.selected.name"></span>
                                        </ui-select-match>
                                        <ui-select-choices repeat="item.productId as item in itemDiverses | filter: $select.search">
                                            <b title="{{item.name}}">{{item.name}}</b>
                                        </ui-select-choices>
                                        <ui-select-no-choice>
                                            No available item.
                                        </ui-select-no-choice>
                                    </ui-select>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="col-md-4" style="padding: 0px;">
                    <ul class="nav nav-tabs tabs-right" role="tablist"
                        style="width: 100%; float: right; margin-bottom: 0px; background: #EFEFEF;">
                        <li role="presentation">
                            <a role="tab" data-toggle="tab" style="width: 5px;"> </a>
                        </li>

                        <li role="presentation" ng-class="{'active':tabActiveId == 'AdjustStatus'}">
                            <a role="tab" data-toggle="tab" title="True Adjustment" ng-click="tabActive('AdjustStatus')" style="color: red;">Adjust Status</a>
                        </li>
                        <li role="presentation" ng-class="{'active':tabActiveId == 'AdjustQTY'}">
                            <a role="tab" data-toggle="tab" title="True Adjustment" ng-click="tabActive('AdjustQTY')" style="color: red;">Adjust QTY</a>
                        </li>
                        <li role="presentation" ng-class="{'active':tabActiveId == 'LPAdjustTitle'}">
                            <a role="tab" data-toggle="tab" title="LP Adjust Title" ng-click="tabActive('LPAdjustTitle')" style="color: red;">LP Adjust Title</a>
                        </li>
                        <li role="presentation" ng-class="{'active':tabActiveId == 'adjustSN'}">
                            <a role="tab" data-toggle="tab" title="LP Adjust SN" ng-click="tabActive('adjustSN')" style="color: red;">LP Adjust SN</a>
                        </li>

                        <li role="presentation" ng-class="{'active':tabActiveId == 'MoveLocation'}">
                            <a role="tab" data-toggle="tab" title="Temp Adjustment" ng-click="tabActive('MoveLocation')">Move Location</a>
                        </li>
                        <li role="presentation" ng-class="{'active':tabActiveId == 'MoveLP'}">
                            <a role="tab" data-toggle="tab" title="Temp Adjustment" ng-click="tabActive('MoveLP')">Move LP</a>
                        </li>

                        <li role="presentation" ng-class="{'active':tabActiveId == 'adjustLotNo'}">
                            <a role="tab" data-toggle="tab" title="LP Adjust Lot No." ng-click="tabActive('adjustLotNo')">Adjust Lot No.</a>
                        </li>
                        <li role="presentation" ng-class="{'active':tabActiveId == 'adjustExpDate'}">
                            <a role="tab" data-toggle="tab" title="LP Adjust Expiration Date" ng-click="tabActive('adjustExpDate')">Adjust Expiration Date</a>
                        </li>
                        <li role="presentation" ng-class="{'active':tabActiveId == 'adjustMfgDate'}">
                            <a role="tab" data-toggle="tab" title="LP Adjust Mfg Date" ng-click="tabActive('adjustMfgDate')">Adjust Mfg Date</a>
                        </li>
                        <li role="presentation" ng-class="{'active':tabActiveId == 'adjustShelfLifeDays'}">
                            <a role="tab" data-toggle="tab" title="LP Adjust Shelf Life Days" ng-click="tabActive('adjustShelfLifeDays')">Adjust Shelf Life Days</a>
                        </li>

                        <!-- <li role="presentation" ng-class="{'active':tabActiveId == 'AdjustUOM'}">
                            <a role="tab" data-toggle="tab" title="True Adjustment" ng-click="tabActive('AdjustUOM')" style="color: red;">Adjust UOM</a>
                        </li> -->
                        <!-- <li role="presentation" ng-class="{'active':tabActiveId == 'AdjustItem'}">
                            <a role="tab" data-toggle="tab" title="True Adjustment" ng-click="tabActive('AdjustItem')" style="color: red;">Adjust Item</a>
                        </li> -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
</form>